/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Layout, message, Modal, Popconfirm, Table, Space, Tag, Button } from 'antd';
import { useRef } from 'react/cjs/react.development';
import DesignContext from '../designContext';
import DataSourceScriptEdit from './dataSourceScriptEdit';
import DesignUtil from '../common/DesignUtil';

const DataSourceScriptList = forwardRef((props, ref) => {
  const [showlist, setShowList] = useState(false);
  const [edit, setEdit] = useState(null);
  const { dataSourceScripts, setDataSourceScripts, loadDataSource, refreash } = useContext(DesignContext);
  const refEdit = useRef(null);

  useImperativeHandle(ref, () => ({ setShowList }));

  useEffect(() => {}, []);

  const editPage = function () {
    if (edit) {
      return (
        <Modal
          visible
          mask={false}
          width={700}
          footer={
            <>
              <Button
                onClick={() => {
                  refEdit.current.test();
                }}
              >
                模拟调试
              </Button>
              <Button
                onClick={() => {
                  const item = refEdit.current.script;
                  // edit
                  const es = dataSourceScripts.map((c) => {
                    if (c.key === item.key) {
                      return item;
                    }
                    return c;
                  });
                  // add
                  const find = dataSourceScripts.find((c) => c.key === item.key);
                  if (!find) {
                    es.push(item);
                  }
                  setDataSourceScripts(es);
                  setEdit(null);
                }}
              >
                确定
              </Button>
            </>
          }
          title="编辑数据源"
          onCancel={() => {
            setEdit(null);
          }}
        >
          <DataSourceScriptEdit ref={refEdit} script={edit} />
        </Modal>
      );
    } else {
      return <></>;
    }
  };

  const editItem = function (index) {
    if (index <= -1) {
      const newObj = {
        name: '',
        createTime: DesignUtil.formatDate(new Date()),
        editTime: DesignUtil.formatDate(new Date()),
        script: '',
      };
      setEdit(newObj);
    } else {
      setEdit({ ...dataSourceScripts[index] });
    }
  };

  const deleteItem = function (index) {
    dataSourceScripts.splice(index, 1);
    setDataSourceScripts([...dataSourceScripts]);
  };

  const columns = [
    {
      title: '数据源',
      dataIndex: 'name',
      key: 'name',
      render: (name) => <p>{name}</p>,
    },
    {
      title: '修改时间',
      dataIndex: 'editTime',
      key: 'editTime',
      render: (editTime) => <p>{DesignUtil.showDate(editTime)}</p>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record, index) => (
        <Space size="middle">
          <Button
            type="link"
            onClick={() => {
              editItem(index);
            }}
          >
            修改
          </Button>
          <Button
            type="link"
            onClick={() => {
              deleteItem(index);
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Modal
        visible={showlist}
        mask={false}
        width={700}
        footer={
          <>
            <Button
              onClick={() => {
                loadDataSource(dataSourceScripts, null, null);
                refreash();
                message.info('当前表单数据源重新载入');
              }}
            >
              重刷表单数据源
            </Button>
            <Button
              onClick={() => {
                setShowList(false);
                loadDataSource(dataSourceScripts, null, null);
                refreash();
                message.info('当前表单数据源重新载入');
              }}
            >
              确定
            </Button>
          </>
        }
        title="数据源列表"
        onCancel={() => {
          setShowList(false);
        }}
      >
        <Button
          onClick={() => {
            editItem(-1);
          }}
        >
          添加
        </Button>
        <Button
          onClick={() => {
            message.info('待开发');
          }}
        >
          引用
        </Button>
        <Table columns={columns} rowKey="key" dataSource={dataSourceScripts} />
      </Modal>
      {editPage()}
    </>
  );
});

export default DataSourceScriptList;
